<!--
 * @Author: zhangyun
 * @Date: 2021-04-22 10:17:14
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-23 14:03:37
 * @Desc: 
-->
<template>
  <section class="creation_center bg-white rounded shadow w-96">
    <header class="flex justify-between px-2 py-2">
      <div class="left flex items-center">
        <i class="iconfont icon-chuangzuozhezhongxin text-2xl text-gray-600 mr-2"></i>
        <strong>创作中心</strong>
        <strong class="ml-2 text-blue-500">Lv{{ level }}</strong>
      </div>
      <div class="right flex items-center cursor-pointer" @click="handleCreationCenter">
        <i class="iconfont icon-shangxiazuoyouTriangle12"></i>
      </div>
    </header>
    <article class="px-2 flex flex-row pb-4 h-24">
      <div class="read-num flex-1 flex flex-col text-sm text-center text-gray-500">
        <span class="yesterday_reader-title mt-1">昨日阅读（播放）数</span>
        <span class="yesterday_reader-num mt-1">{{ readNum || '计算中' }}</span>
        <span class="yesterday_reader-contrast mt-1 text-blue-500">较前日{{ readContrastNum || '--' }}</span>
      </div>
      <div class="slider"></div>
      <div class="support-num flex-1 flex flex-col text-sm text-center text-gray-500">
        <span class="yesterday_reader-title mt-1">昨日赞同数</span>
        <span class="yesterday_reader-num mt-1">{{ supportNum || '计算中' }}</span>
        <span class="yesterday_reader-contrast mt-1 text-blue-500">较前日{{ supportContrastNum || '--' }}</span>
      </div>
    </article>
    <footer class="mx-6 border-t py-2 text-gray-400 text-center text-xs">瓦力保镖为你的创作持续护航</footer>
  </section>
</template>

<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'CreationCenter',
  props: {
    level: {
      type: Number,
      require: false,
      default: 0,
    },
    readNum: {
      type: Number,
      require: false,
      default: 0,
    },
    readContrastNum: {
      type: Number,
      require: false,
      default: 0,
    },
    supportContrastNum: {
      type: Number,
      require: false,
      default: 0,
    },
    supportNum: {
      type: Number,
      require: false,
      default: 0,
    },
  },
  setup() {
    const router = useRouter()
    function handleCreationCenter() {
      const { href } = router.resolve({
        path: '/creator',
      })
      window.open(href, '_blank')
    }
    return { handleCreationCenter }
  },
})
</script>

<style></style>
